<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1-组件实例-自定义下拉框</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>下拉列表1</h2>
        <custom-select btn="搜索" :list="list1"></custom-select>

        <h2>下拉列表2</h2>
        <table>
            <tr is="custom-select" btn="查询" :list="list2"></tr>
            <!-- <custom-select btn="查询" :list="list2"></custom-select> -->
        </table>
    </div>


    <script>
        Vue.component('custom-select', {
            data: function() {
                return {
                    showList: false,
                    selVal: ""
                }
            },
            props: ["btn", "list"],
            template: `
                        <section class="warp">
                            <div class="searchIpt clearFix">
                                <div class="clearFix">
                                    <input type="text" class="keyWord" @click="showList = !showList" :value="selVal" />
                                    <input type="button" :value="btn">
                                    <span></span>
                                </div>
                               <custom-list v-show="showList" :ulist="list" v-on:childClick="selectChange" v-cloak></custom-list>
                            </div>
                        </section>
                    `,
            methods: {
                selectChange(item) {
                    this.selVal = item;
                    this.showList = false;
                }
            }

        })


        Vue.component('custom-list', {
            props: ["ulist"],
            template: `
                        <ul class="list">
                            <li v-for="(item,index) in ulist" :key="index" @click="selectVal(item)">{{item}}</li>
                        </ul>
                    `,
            methods: {
                selectVal: function(item) {
                    this.$emit('childClick', item)
                }
            }
        })

        new Vue({
            el: "#app",
            data: {
                list1: ["北京", "上海", "杭州"],
                list2: ["晴天", "阴天", "雨天"]
            }
        })
    </script>
</body>

</html>